<template>
    <view id="withdraw">
        <view class="content" @click="getBankCard">
            <view class="content-title msfont" :class="bankIcon" :style="{color:iconColor}"></view>
            <view class="content-text">
                <view class="bankcard-name">{{bankCard}}</view>
                <!-- <view class="bankcard-detail">尾号 {{tailNumber}}  {{cardType}}</view> -->
                <view class="bankcard-detail">{{frontPart}}  {{behindPart}}</view>
            </view>
            <view class="content-action"><uni-icons type="arrowright"  size="20" /></view>
        </view>
        <view class="withdraw-tip top-margin">提现金额（手续费为提现金额的{{percent}}%）</view>
        <view class="form">
        	<view class="form-title title-sp">￥</view>
        	<input class="uni-input" @input="amountInput" name="amount" type="digit" maxlength="20" v-model="amount" placeholder="请输入金额" />
            <view @click="getTotal" class="form-action action-sp">全部提出</view>
        </view>
        <view class="withdraw-total">可提现金额：<text class="totalAmount">{{totalAmount}}</text></view>
        <view class="form top-margin">
        	<view class="form-title">手机号码</view>
        	<input class="uni-input" name="phone" type="number" maxlength="11" v-model="phone" placeholder="请输入手机号" />
            <view class="form-action"></view>
        </view>
        <view class="form">
        	<view class="form-title">验证码</view>
        	<input class="uni-input" name="valid" type="number" maxlength="6" v-model="valid" placeholder="请输入验证码" />
            <view class="form-action"><button class="sendBtn" @click="sendCode" type="info" :disabled="codeBtn.disabled" size="mini">{{codeBtn.text}}</button></view>
        </view>
        <view class="form top-margin">
        	<view class="form-title">二级密码</view>
        	<input class="uni-input" name="secondaryPwd" type="password" maxlength="20" v-model="secondaryPwd" placeholder="请输入二级密码" />
            <view class="form-action"></view>
        </view>
        <button @click="submitFun" class="btn" type="primary" >确定提现</button>
    </view>
</template>
<script>
    import uniIcons from '@/components/uni-icons/uni-icons.vue'
    import validate from '@/common/ys-validate.js'
    import { bankCardAttribution } from "@/common/bankcard.js"
    import { withdrawal, sendMessage } from "@/common/api.js"
    export default {
        name: "withdraw",
        data() {
            return {
                bankCard:'',
                bankCardNum:'',
                frontPart:'',
                behindPart:'',
                amount:'',
                totalAmount:'',
                percent:'',
                phone:'',
                valid:'',
                secondaryPwd:'',
                bankIcon:'',
                iconColor:'',
                countTotal:'',
                bank_id:'',
                poundage:'',
                codeBtn:{
                    disabled:false,
                    text:'发送验证码'
                },
                navigateFlag:false,
            };
        },
        components: {
            uniIcons,
        },
        methods: {
            sendCode(){
                if(this.phone){
                    if(!validate.isPhone(this.phone)){
                        uni.showToast({
                            icon: 'none',
                            title: '请输入正确手机号'
                        })
                        return;
                    }
                    let time=60;
                    this.codeBtn.disabled=true;
                    this.codeBtn.text=`重新发送(${time})`;
                    const timer = setInterval(()=>{
                        this.codeBtn.text=`重新发送(${time--})`;
                        if(time<0){
                            this.codeBtn.disabled=false;
                            this.codeBtn.text='发送验证码'
                            clearInterval(timer)
                        }
                    },1000)
                    sendMessage({mobi:this.phone,type:'151'}).then((res)=>{
                        const data = res.data;
                        if(data.errcode==0){
                            uni.showToast({
                                icon: 'none',
                                title: '发送成功'
                            })
                        }else{
                            uni.showToast({
                                icon: 'none',
                                title: data.msg
                            })
                        }
                    })
                }else{
                    uni.showToast({
                        icon: 'none',
                        title: '请先输入手机号'
                    })
                }
            },
            getBankCard(){
                if (this.navigateFlag) {
                    return;
                }
                this.navigateFlag = true;
                uni.navigateTo({
                    url: '/pages/wallet/withdraw/withdrawCard'
                })
                setTimeout(() => {
                    this.navigateFlag = false;
                }, 1000)
            },
            getTotal(){
                this.amount = this.countTotal
            },
            amountInput(e){
                // console.log(e.detail.value>this.countTotal)
                if(e.detail.value> (+this.countTotal)){
                    setTimeout(()=>{
                        this.amount = this.countTotal
                    },100)
                }
            },
            getBankIcon(code){
                switch(code){
                    case 'zfb':
                      return {icon:'ms-zhifubao',back:'#4292f6'};
                    case 'ICBC' :  //工商
                      return  {icon:'ms-ICBC',back:'#ff535a'}
                    // case 'COMM':   //交通银行
                    //   return  {icon:'ms-COMM',back:'#00408f'}
                    case 'BOC':    //中国银行
                      return  {icon:'ms-BOC',back:'#93172f'}
                    case 'CMB':     //招商银行
                       return  {icon:'ms-CMB',back:'#c8152d'}
                    case 'ABC':     //农业银行
                       return  {icon:'ms-ABC',back:'#079679'}
                    case 'CCB':     //建设银行
                       return  {icon:'ms-CCB',back:'#0d3e9d'}
                    case 'SPDB':     //浦发银行
                       return  {icon:'ms-CCB',back:'#ccc'}
                    default:
                      return  {icon:'ms-yinhangka',back:'#4292f6'}
                }
            },
            prepareTheData(){
                let data=uni.getStorageSync('_walletInfo_');
                let rate=uni.getStorageSync('_walletRate_');      //data.bank_card='6212264100011335373'
                let cardData = bankCardAttribution(data.bank_card);
                this.bankCardNum = data.bank_card;
                this.tailNumber = data.bank_card.slice(-4);
                this.totalAmount = data.balance;
                this.percent = rate.toString();
                // this.phone = data.phone;
                this.bank_id = data.bank_id;
                if(data.bank_type=='zfb'){
                    this.bankCard = '支付宝账号';
                    this.bankIcon='ms-zhifubao';
                    this.frontPart=data.name;
                    this.behindPart=data.phone;
                    this.iconColor='#4292f6'
                }else{
                    this.bankCard = data.bank_name;
                    this.bankIcon=this.getBankIcon(cardData.bankCode).icon;
                    this.iconColor=this.getBankIcon(cardData.bankCode).back;
                    this.frontPart=`尾号 ${this.tailNumber}`;
                    this.behindPart=cardData=='error'?'':cardData.cardTypeName;
                }
                this.countTotal = (this.totalAmount/(1+this.percent/100)).toFixed(2)
            },
            submitFun(){
                if(!this.amount){
                    uni.showToast({
                        icon: 'none',
                        title: '请输入提现金额'
                    })
                    return;
                }
                if(!validate.isPhone(this.phone)){
                    uni.showToast({
                        icon: 'none',
                        title: '请输入正确的手机号'
                    })
                    return;
                }
                if(!this.valid){
                    uni.showToast({
                        icon: 'none',
                        title: '请输入验证码'
                    })
                    return;
                }
                if(!validate.isPwd(this.secondaryPwd)){
                    uni.showToast({
                        icon: 'none',
                        title: '请输入6-20位密码'
                    })
                    return;
                }
                this.poundage=(this.amount*this.percent/100).toFixed(2)
                let p = withdrawal({
                    code:this.valid,
                    money:this.amount,
                    phone:this.phone,
                    poundage:this.poundage,
                    trader_pwd:this.secondaryPwd,
                    bank_id:this.bank_id,
                }).then((res)=>{
                    const data = res.data;
                    if(data.errcode==0){
                        uni.showModal({
                            title: '提示',
                            content: '提现申请成功',
                            success: function (res) {
                                if (res.confirm) {
                                    uni.navigateBack({
                                        delta: 1
                                    });
                                }
                            }
                        });
                    }else if(data.errcode==1000 || data.errcode==1001){
                        uni.removeStorageSync('token');
                        uni.reLaunch({
                        	url:'/pages/home/welcome'
                        })
                    }else{
                        uni.showToast({
                        	icon: 'none',
                        	title:data.msg
                        });
                    }
                })
                return p
            }
        },
        onShow() {
            this.prepareTheData()
        }
    };
</script>
<style lang="scss">
    #withdraw {
        position: relative;
        padding-top: 24rpx;
        .content {
            display: flex;
            align-items: center;
            justify-content: center;
            flex: 1;
            background: #fff;
            .content-title{
                padding: 20rpx;
                padding-left: 30rpx;
                width: 70rpx;
                font-size: 56rpx;

            }
            .ms-yinhangka{
                font-size: 44rpx;
            }
            .content-action{
                padding: 10rpx 30rpx;
            }
            .content-text{
                flex: 1;
                .bankcard-name{

                }
                .bankcard-detail{
                    font-size: 24rpx;
                    color: #999;
                }
            }
        }
        .withdraw-tip{
            font-size: 28rpx;
            padding: 20rpx;
            background: #fff;
            padding-bottom: 0;
        }
        .withdraw-total{
            padding: 20rpx;
            background: #fff;
            padding-top: 0;
            .totalAmount{
                color: #FF565D;
            }
        }
        .top-margin{
            margin-top: 20rpx;
        }
        .form{
            display: flex;
            align-items: center;
            justify-content: center;
            flex: 1;
            background: #fff;
            .form-title{
                padding: 20rpx;
                padding-left: 30rpx;
                width: 150rpx;
            }
            .title-sp{
                font-size: 44rpx;
                width: 50rpx;
            }
            .form-action{
                padding: 10rpx 30rpx;
                .sendBtn{
                    color: #000;
                }
            }
            .action-sp{
                color: #4292f6;
            }
        }
        .btn{
            margin: 30rpx;
            font-size: 32rpx;
            margin-top: 60rpx;
            color: #fff;
            background: #1A66FF;
        }
    }
</style>
